import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:number_spark_flutter/db_manager/bean/ns_record_bean.dart';
import 'package:number_spark_flutter/style/ns_style.dart';
import 'package:number_spark_flutter/widgets/brick/ns_brick.dart';

import 'ns_record_logic.dart';

class NSRecordPage extends StatelessWidget {
  NSRecordPage({Key? key}) : super(key: key);

  final logic = Get.put(NSRecordLogic());
  static const double _Pi = 3.14;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          NSImage(
            margin: EdgeInsets.only(top: ScreenUtil().statusBarHeight + 14.w, left: 20.w),
            assetImage: 'icon_record_top.png',
            width: 133.w,
          ),
          _buildRecordListView(),
          NSImage(
            margin: EdgeInsets.only(top: 18.w, left: 20.w),
            assetImage: 'icon_record_statisties.png',
            width: 133.w,
          ),
          _buildStatisticsView()
        ],
      ),
    );
  }

  Expanded _buildRecordListView() {
    return Expanded(
      child: GetBuilder<NSRecordLogic>(
        builder: (logic) {
          if (logic.recordList.isEmpty) {
            return const NSImage(
              assetImage: 'icon_record_empty.png',
              width: double.infinity,
            );
          } else {
            return ListView.builder(
              padding: EdgeInsets.zero,
              shrinkWrap: true,
              itemBuilder: (context, index) {
                NSRecordBean recordBean = logic.recordList[index];
                Color backgroundColor = index % 2 == 0 ? kAppColor('#1A000000') : kAppColor('#40000000');
                return NSRow(
                  color: backgroundColor,
                  children: [
                    NSImage(
                      assetImage: 'icon_record_${recordBean.type}.png',
                      width: 100.w,
                    ),
                    SizedBox(width: 50.w),
                    if (recordBean.type == 'single')
                      NSText(
                        alignment: Alignment.center,
                        width: 75.w,
                        text: recordBean.myCorrectCount.toString(),
                        fontSize: 40.sp,
                        fontFamily: 'Modak-Regular',
                        textColor: Colors.white,
                      )
                    else
                      NSColumn(
                        margin: EdgeInsets.only(top: 10.w),
                        width: 75.w,
                        children: [
                          NSRow(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: [
                              NSImage(
                                assetImage: 'icon_record_me.png',
                                width: 20.w,
                              ),
                              NSImage(
                                assetImage: 'icon_record_you.png',
                                width: 20.w,
                              )
                            ],
                          ),
                          NSText(
                            text: '${recordBean.myCorrectCount} : ${recordBean.yourCorrectCount}',
                            textColor: Colors.white,
                            fontSize: 24.sp,
                            fontFamily: 'Modak-Regular',
                          )
                        ],
                      ),
                    const Spacer(),
                    if (recordBean.myCorrectCount == recordBean.yourCorrectCount)
                      NSImage(
                        margin: EdgeInsets.only(right: 20.w),
                        assetImage: 'icon_record_draw.png',
                        width: 63.w,
                      )
                    else
                      Row(
                        children: [
                          if (recordBean.type == 'double')
                            NSImage(
                              margin: EdgeInsets.only(right: 6.w),
                              assetImage: recordBean.isMeWin == true ? 'icon_record_me.png' : 'icon_record_you.png',
                              width: 52.w,
                            ),
                          NSImage(
                            margin: EdgeInsets.only(right: 20.w),
                            assetImage: 'icon_record_rank.png',
                            width: 32.w,
                          )
                        ],
                      )
                  ],
                );
              },
              itemCount: logic.recordList.length,
            );
          }
        },
        id: idRecordList,
      ),
    );
  }

  Container _buildStatisticsView() {
    double mePercent = 0;
    double youPercent = 0;
    int doubleCount = logic.recordList.where((element) => element.type == 'double' && (element.myCorrectCount != element.yourCorrectCount)).length;
    if (doubleCount > 0) {
      mePercent = logic.recordList.where((element) => (element.myCorrectCount ?? 0) > (element.yourCorrectCount ?? 0) && element.type == 'double').length / doubleCount;
      youPercent = logic.recordList.where((element) => (element.myCorrectCount ?? 0) < (element.yourCorrectCount ?? 0) && element.type == 'double').length / doubleCount;
    }
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20.w),
      height: 180.h,
      child: Row(
        children: [
          Expanded(
            child: Stack(
              children: [
                Container(
                  margin: EdgeInsets.symmetric(vertical: 15.w),
                  child: CustomPaint(
                    painter: ProgressPaint(mePercent * 100 / 50 * _Pi, 20, kAppColor('#26FFFFFF'), kAppColor('#FF46EBFD'), false),
                    child: Container(),
                  ),
                ),
                Container(
                  margin: EdgeInsets.symmetric(vertical: 38.w),
                  child: CustomPaint(
                    painter: ProgressPaint(youPercent * 100 / 50 * _Pi, 20, kAppColor('#26FFFFFF'), kAppColor('#FFF9D330'), true),
                    child: Container(),
                  ),
                ),
              ],
            ),
          ),
          NSColumn(
            margin: EdgeInsets.only(left: 24.w, right: 20.w, top: 10.w),
            children: [
              NSText(
                text: '${(mePercent * 100).toStringAsFixed(0)}%',
                textColor: kAppColor('#FF46EBFD'),
                fontSize: 28.sp,
                fontFamily: 'Modak-Regular',
                marginDrawable: 9.w,
                startDrawable: NSImage(
                  assetImage: 'icon_record_me.png',
                  width: 52.w,
                ),
              ),
              SizedBox(height: 33.h),
              NSText(
                text: '${(youPercent * 100).toStringAsFixed(0)}%',
                textColor: kAppColor('#FFF9D330'),
                fontSize: 28.sp,
                fontFamily: 'Modak-Regular',
                marginDrawable: 9.w,
                startDrawable: NSImage(
                  assetImage: 'icon_record_you.png',
                  width: 52.w,
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

class ProgressPaint extends CustomPainter {
  ProgressPaint(
      this.progress, //进度
      this.width, //画笔宽度
      this.backgroundColor, //背景画笔颜色
      this.progressColor,
      this.isOpposite) {
    //背景画笔
    paintBg = Paint()
      ..color = backgroundColor
      ..strokeWidth = width - 10
      ..isAntiAlias = true //是否开启抗锯齿
      ..style = PaintingStyle.stroke; // 画笔风格，线
    //进度画笔
    paintProgress = Paint()
      ..color = progressColor
      ..strokeWidth = width
      ..isAntiAlias = true //是否开启抗锯齿
      ..strokeCap = StrokeCap.round // 笔触设置为圆角
      ..style = PaintingStyle.stroke; // 画笔风格，线
  }

  final Color backgroundColor;
  final double progress;
  final Color progressColor;
  final double width;
  bool isOpposite = false; //是否反向

  var paintBg;
  var paintProgress;

  @override
  void paint(Canvas canvas, Size size) {
    //半径，这里为防止宽高不一致，取较小值的一半作为半径大小
    double radius = size.width > size.height ? size.height / 2 : size.width / 2;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), radius, paintBg);
    Rect rect = Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: radius);
    canvas.drawArc(rect, 0, isOpposite ? -progress : progress, false, paintProgress);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}
